<template>
    <el-form ref="formRef" :inline="true" :model="form">
        <el-form-item label="班级名称：" prop="Name">
            <el-input v-model="form.Name" placeholder="请输入班级名称" clearable @keyup.enter="getlist" />
        </el-form-item>
        <el-form-item label="学号编号：" prop="No">
            <el-input v-model="form.No" placeholder="请输入学生编号" clearable @keyup.enter="getlist" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="Search" @click="getlist">确定</el-button>
            <el-button :icon="Refresh" @click="resetForm">重置</el-button>
        </el-form-item>
        <el-form-item>
            <span>注：默认下列为全部数据</span>
        </el-form-item>
    </el-form>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="schart" id="columChart"></div>
                </el-col>
                <el-col :span="12">
                    <div class="schart" id="epieChart"></div>
                </el-col>
                <el-col :span="12">
                    <div class="schart" id="pieChart"></div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import echarts from "echarts";
export default {
    name: "baseCharts",
    data() {
        return {
            colum: null,
            epie: null,
            pie: null,
            personData: [],
            allData: [],
            columData: [],
            epieData: [],
            pieData: [],
            form: {
                No: "",
                Name: "",
            },
            nowUser: "M B T I",
            screenWidth: document.body.clientWidth,
            isWidth: false
        };
    },
    mounted() {
        this.setClient();
        this.getAll();
    },
    methods: {
        async getlist() {
            if (this.form.Name === "") {
                const { data: ret } = await this.$http.post("api/query/result", {
                    Sno: this.form.No,
                    Pno: "",
                });
                this.allData = ret.Data["ret"];
                this.getSEdata();
                this.getAEdata();
                this.getCEdata();
                this.nowUser = this.form.No;
                this.chartSet();
                this.accclist();
            } else {
                const { data: res } = await this.$http.post(
                    "api/query/className",
                    { Name: this.form.Name }
                );
                if (res.Data["count"] == 0) {
                    this.$message.error("班级不存在，请确认后查询")
                } else if (res.Data["count"] != 1) {
                    this.$message.error("请输入班级全称，然后再查询")
                } else {
                    this.nowUser = this.form.Name
                    let ID = res.Data["res"][0].No
                    const { data: ret } = await this.$http.post(
                        "/api/query/resultCno",
                        { No: ID }
                    );
                    this.allData = ret.Data["ret"];
                    this.getSEdata();
                    this.getAEdata();
                    this.getCEdata();
                    this.chartSet();
                    this.accclist();
                }
            }
        },
        async getAll() {
            const { data: res } = await this.$http.post("api/query/result", {
                Sno: "",
                Pno: "",
            });
            const { data: ret } = await this.$http.post(
                "/api/query/personalityAll",
                {}
            );
            this.allData = res.Data["ret"];
            this.personData = ret.Data["ret"];
            this.nowUser = "M B T I";
            this.getSEdata();
            this.getAEdata();
            this.getCEdata();
            this.chartSet();
            this.accclist();
        },
        getSEdata() {
            let months = {
                1: 0,
                2: 0,
                3: 0,
                4: 0,
                5: 0,
                6: 0,
                7: 0,
                8: 0,
                9: 0,
                10: 0,
                11: 0,
                12: 0,
            };
            for (var i = 0; i < this.allData.length; i++) {
                let month = parseInt(this.allData[i].Time.substring(5, 7));
                months[month]++;
            }
            this.columData = months;
        },
        getCEdata() {
            let info = [
                { value: 0, name: "上午" },
                { value: 0, name: "下午" },
                { value: 0, name: "傍晚" },
                { value: 0, name: "深夜" },
            ];
            let hours = [0, 0, 0, 0];
            for (var i = 0; i < this.allData.length; i++) {
                let hour = parseInt(this.allData[i].Time.substring(11, 13));
                if (hour >= 6 && hour < 12) hours[0]++;
                if (hour >= 12 && hour < 18) hours[1]++;
                if (hour >= 18 && hour < 24) hours[2]++;
                if (hour >= 0 && hour < 6) hours[3]++;
            }
            for (i = 0; i < 4; i++) {
                info[i].value = hours[i];
            }
            this.pieData = info;
        },
        getAEdata() {
            let info = [
                { value: 0, name: "jsh" },
                { value: 0, name: "ISTJ" },
                { value: 0, name: "ISFJ" },
                { value: 0, name: "INFJ" },
                { value: 0, name: "INTJ" },
                { value: 0, name: "ISTP" },
                { value: 0, name: "ISFP" },
                { value: 0, name: "INFP" },
                { value: 0, name: "INTP" },
                { value: 0, name: "ESTP" },
                { value: 0, name: "ESFP" },
                { value: 0, name: "ENFP" },
                { value: 0, name: "ENTP" },
                { value: 0, name: "ESTJ" },
                { value: 0, name: "ESFJ" },
                { value: 0, name: "ENFJ" },
                { value: 0, name: "ENTJ" },
            ];
            let pno = {};
            for (var i = 0; i < this.allData.length; i++) {
                let idx = parseInt(this.allData[i].Pno);
                if (pno[idx] == null) {
                    pno[idx] = 1;
                }
                pno[idx]++;
            }
            for (i = 1; i <= 16; i++) {
                info[i].value = pno[i];
            }
            this.epieData = info;
        },
        chartSet() {
            let self = this;
            let e1 = document.getElementById("columChart");
            self.colum = echarts.init(e1);
            let e2 = document.getElementById("epieChart");
            self.epie = echarts.init(e2);
            let e3 = document.getElementById("pieChart");
            self.pie = echarts.init(e3);
        },
        accclist() {
            this.columEcharts();
            this.epieEcharts();
            this.pieEcharts();
        },
        columEcharts() {
            let option = {
                title: {
                    text: "月访问量",
                    subtext: this.nowUser,
                },
                color: ["#3398DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                legend: {
                    data: ["月访问次数"],
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: true,
                            type: ["funnel"],
                        },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "一月",
                            "二月",
                            "三月",
                            "四月",
                            "五月",
                            "六月",
                            "七月",
                            "八月",
                            "九月",
                            "十月",
                            "十一月",
                            "十二月",
                        ],
                        axisTick: {
                            alignWithLabel: true,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "月访问次数",
                        type: "bar",
                        barWidth: "60%",
                        data: [
                            this.columData[1],
                            this.columData[2],
                            this.columData[3],
                            this.columData[4],
                            this.columData[5],
                            this.columData[6],
                            this.columData[7],
                            this.columData[8],
                            this.columData[9],
                            this.columData[10],
                            this.columData[11],
                            this.columData[12],
                        ],
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(180, 180, 180, 0.2)",
                        },
                        label: {
                            show: true,
                            position: "inside",
                        },
                    },
                ],
            };
            this.colum.setOption(option, true);
        },
        epieEcharts() {
            let option = {
                title: {
                    text: "人格数量分布图",
                    subtext: this.nowUser,
                    x: "center",
                    y: "center",
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                legend: {
                    x: "center",
                    y: "bottom",
                    data: [
                        "ISTJ",
                        "ISFJ",
                        "INFJ",
                        "INTJ",
                        "ISTP",
                        "ISFP",
                        "INFP",
                        "INTP",
                        "ESTP",
                        "ESFP",
                        "ENFP",
                        "ENTP",
                        "ESTJ",
                        "ESFJ",
                        "ENFJ",
                        "ENTJ",
                    ],
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: true,
                            type: ["funnel"],
                        },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                calculable: true,
                series: [
                    {
                        name: "测试结果分布",
                        type: "pie",
                        radius: [70, 100],
                        center: ["50%", "50%"],
                        data: [
                            this.epieData[1],
                            this.epieData[2],
                            this.epieData[3],
                            this.epieData[4],
                            this.epieData[5],
                            this.epieData[6],
                            this.epieData[7],
                            this.epieData[8],
                            this.epieData[9],
                            this.epieData[10],
                            this.epieData[11],
                            this.epieData[12],
                            this.epieData[13],
                            this.epieData[14],
                            this.epieData[15],
                            this.epieData[16],
                        ],
                    },
                ],
            };
            this.epie.setOption(option, true);
        },
        pieEcharts() {
            let option = {
                title: {
                    text: "完成测试时间段",
                    subtext: this.nowUser,
                    x: "center",
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    data: ["上午", "下午", "傍晚", "深夜"],
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: true,
                            type: ["funnel"],
                        },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                series: [
                    {
                        name: "测试时间段",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "60%"],
                        data: [
                            this.pieData[0],
                            this.pieData[1],
                            this.pieData[2],
                            this.pieData[3],
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
            this.pie.setOption(option, true);
        },
        resetForm() {
            this.form.Name = "";
            this.form.No = "";
            this.getAll();
        },
        setClient() {
            this.screenWidth = document.body.offsetWidth
            console.log(this.screenWidth)
            if (this.screenWidth < 1550) {
                this.isWidth = false
            } else {
                this.isWidth = true
            }
        }
    },
};
</script>

<style scoped>
.schart {
    width: 100%;
    height: 376px;
}
</style>
